<div class="single-widget-container">
    <section class="widget login-widget">
        <header class="text-align-center">
            <h4>Ingresa a tu cuenta</h4>
        </header>
        <div class="alert alert-danger" style="display: none;" id="msj_div">
                <strong><i class="fa fa-ban"></i> Error!</strong> <span id="msj">You successfully read this important alert message.</span>
        </div>
        <div class="body">
            <form class="no-margin"
                  action="index.html" method="get">
                <fieldset>
                    <div class="form-group no-margin">
                        <label for="email" >Email</label>

                        <div class="input-group input-group-lg">
                                <span class="input-group-addon">
                                    <i class="eicon-user"></i>
                                </span>
                            <input id="email" type="email" class="form-control input-lg"
                                   placeholder="Tu Email">
                        </div>

                    </div>

                    <div class="form-group">
                        <label for="password" >Contraseña</label>

                        <div class="input-group input-group-lg">
                                <span class="input-group-addon">
                                    <i class="fa fa-lock"></i>
                                </span>
                            <input id="password" type="password" class="form-control input-lg"
                                   placeholder="Tu Password">
                        </div>

                    </div>
                </fieldset>
                <div class="form-actions">
                    <button type="button" class="btn btn-block btn-lg btn-success" id="login">
                        <span class="small-circle"><i class="fa fa-caret-right"></i></span>
                        <small>Ingresar</small>
                    </button>
                    <div class="forgot"><a class="forgot" href="#">¿Olvidaste tu Contraseña?</a></div>
                </div>
            </form>
        </div>
        <footer>
            <div class="facebook-login">
                <a href="<?php echo $login_url ?>"><span><i class="fa fa-facebook-square fa-lg"></i> Ingresa con Facebook</span></a>
            </div>
        </footer>
    </section>
</div>

<script type="text/javascript">
 $(document).ready(function(){
        $("#login").click(function(){
            $("#msj_div").fadeOut('slow');
            var valid = true;
            if ($("#email").val() == "") {
                valid = false;
            };
            
            if ($("#password").val() == "") {
                valid = false;
            }
            
            if (valid) {
                var data_ajax={
                     type: 'POST',
                     url: "login/validate",
                     data: { user: $("#email").val(), pass : $("#password").val() },
                     success: function( data ) {
                                                 if(data == 0)
                                                 {
                                                    //error
                                                    $("#msj").html("El Email y/o la Contraseña ingresada no son correctos.");
                                                    $("#msj_div").fadeIn('slow');
                                                 }
                                                 else
                                                 {
                                                    //redirect
                                                    window.location.href = './user/dashboard';
                                                 }
                                               },
                     error: function(){
                                         //error de conexion
                                       },
                     dataType: 'json'
                     };
                     $.ajax(data_ajax); 
            }
            else
            {
                $("#msj").html("Los campos Email y Contraseña son obligatorios.");
                $("#msj_div").fadeIn('slow');
            }
            
        });
 });
</script>